<template>
  <div class="container">
    <!-- 轮播 -->
    <Swiper></Swiper>
    <div id="nav" :class="isNav ? 'fixed' : ''"  ref="m">电影</div>
    <p><router-link to="/movie/2332">跳转到detail页面</router-link></p>
    <router-view></router-view>
  </div>
</template>

<script>
import Swiper from "./components/Swiper.vue";
export default {
  components: {
    Swiper,
  },
  data() {
    return {
      isNav: false,
    };
  },
  methods: {
    handleScroll() {
      var scrollTop = window.scrollY;
      this.isNav = scrollTop > 300 ? true : false;
      if(scrollTop > 300){
          this.$refs.m.style.opacity = 1
      }else{
          this.$refs.m.style.opacity = 0
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped>
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
.container {
  height: 3500px;
}
.container >>> .van-swipe img {
  height: 300px;
  width: 100%;
}
#nav {
  width: 100%;
  height: 50px;
  background-color: #ff2d51;
}
</style>